@import '@/assets/styles/var';
// @import '@/assets/styles/common';

.article-panel {
    // flex: 1;
    // padding-bottom: 30px;
    // width: 100vw;
    // width: 100%;
    // width: calc(100vw - 20px);
    // background-color: #fff;
    // 01.图文内容
    .detail {
        // position: relative;
        display: flex;
        justify-content: center;
        // margin: 0 auto;
        // padding: 0 10px;
        width: 100%;
        // margin: 0;
        padding: 0 0px;
        background-color: #fff;

        // 01.图文
        .article {
            position: relative;
            border-bottom: 1px solid #e5e9ef;
            margin-bottom: 20px;
            padding-top: 40px;
            // width: 820px;
            // width: calc(100% - 240px);
            max-width: 100%;
            background-color: #fff;
            padding: 10px 0;
            margin-bottom: 0;
            // 1.1 标题区
            .detail-title {
                margin-bottom: 20px;
                // padding: 5px 0px;
                padding-bottom: 5px;
                border-bottom: 1px solid #e5e9ef;
                // padding: 0px 10px;
                h1 {
                    margin-bottom: 28px;
                    // min-height: 39px;
                    font-size: $vtsize-h1;  // 24px;
                    line-height: 1.25;
                    font-weight: 600;
                    // font-family: Helvetica, Verdana, Arial, sans-serif, PingFang SC, Hiragino Sans GB, Microsoft YaHei, WenQuanYi Micro Hei, sans-serif, SimHei, SimSun;
                    margin-bottom: 2px;
                }

                .info-box {
                    margin-bottom: 20px;
                    color: $vttextmute; // #999;
                    font-size: $vtsize-small;   // 14px;
                    margin: 10px 0px;

                    span {
                        margin-right: 10px;
                    }
                }
            }

            // 1.2 内容区 穿透
            .detail-content {
                margin-bottom: 50px;
                // padding: 0px 40px;
                margin-bottom: 10px;
                padding: 0px 0px;
                // font-family:Helvetica, Verdana, Arial, sans-serif, PingFang SC, Hiragino Sans GB, Microsoft YaHei, WenQuanYi Micro Hei, sans-serif, SimHei, SimSun;
                // 引文段
                blockquote {
                    color: #6d757a;
                    padding-left: 20px;
                    position: relative;

                    p {
                        margin-bottom: 12px;
                    }
                }
                // 引用
                blockquote:before {
                    content: "";
                    width: 15px;
                    height: 15px;
                    display: block;
                    position: absolute;
                    top: 4px;
                    left: 0;
                    background-image: url();
                    background-size: 100% 100%;
                }
                // 标题及内容
                h2 {
                    margin: 10px 0;
                    // font-size: 22px !important;
                    font-weight: 600 !important;
                    font-size: 18px !important;
                }
                h2, h2 strong, h2 span {
                    font-size: 18px !important;
                    font-weight: 600 !important;
                }
                h3 {
                    margin: 10px 0;
                    // font-size: 18px !important;
                    // font-weight: 600 !important;
                    font-size: 16px !important;
                }
                h3, h3 strong, h3 span {
                    font-size: 16px !important;
                    // font-weight: 600 !important;
                }
                strong {
                    font-weight: 600;
                }
                p, span {
                    margin:5px 0;
                    // font-size: 16px;
                    // line-height: 26px;
                    // cursor: text;
                    font-size: 15px !important;
                    line-height: 1.4 !important;

                }
                a {
                    padding: 0 0 2px;
                    border-bottom: 1px dashed #003abd;
                    color: #333 !important;
                    &:hover {
                        color: #003abd !important;
                        font-weight: 500;
                    }
                }
                // 图片
                img {
                    margin: 0 auto;
                    max-width: 100% !important;
                    height: auto;
                    text-align: center !important;
                    cursor: pointer;
                }
                // 列表
                // hr
                hr {
                    margin: 20px 10px !important; 
                    padding: 0px !important; 
                    max-width: 100% !important; 
                    overflow-wrap: break-word !important; 
                    box-sizing: border-box !important; 
                    border-style: solid !important; 
                    border-right-width: 0px; 
                    border-bottom-width: 0px; 
                    border-left-width: 0px; 
                    border-color: rgba(0, 0, 0, 0.2) !important; 
                    transform-origin: 0px 0px; 
                    transform: scale(1, 0.5);
                }
            }


        }

        // 02.分享
    }
    // 推荐内容
    .recommend { 
        position: relative;
        display: flex;
        justify-content: center;
        margin: 0 auto;
        // margin-bottom: 20px;
        // padding: 0 20px;
        width: 100%;
        // font-weight: 500;
        
        // padding: 16px 20px;
        // background-color: #fff;
        .content {
            padding: 20px 20px 0;
            // width: 820px;
            // font-size: 16px;
            font-weight: 500;
            // color: #333;
            margin-bottom: 20px;
            background-color: #fff;
            h4 {
                // padding: 20px 0 16px;
                padding-bottom: 16px;
                font-weight: 600;
                line-height: 30px;
                border-bottom: #e4e6eb 1px solid;
            }
            .list {
                .item {
                    padding: 10px 4px;
                    border-bottom: #e4e6eb 1px solid;
                    .title {
                        font-size: $vtsize-p;   // 15px;
                        font-weight: 500;
                        // color: #333;
                        // margin-bottom: 20px;
                    }
                    .content {
                        font-size: 14px;
                        // color: #666;
                    }
                    &:last-child {
                        border-bottom: none;
                    }
                    &:hover { 
                        .title {
                            color: #1e80ff;
                            // background-color: #e4e6eb;
                            a {
                                color: $themeColor;

                            }
                        }
                    }
                }
                // .item:last-child {
                //     border-bottom: none;
                // }
            }
        }
    }
}
